<script setup>
import { useI18nStore } from '@/stores';
const i18nStore = useI18nStore();
</script>

<template>
  <div class="mb-[80px]">
    <h1 class="text-[42px] font-bold text-center mb-[40px] mobile:text-3xl">
      {{ i18nStore.translate('index124') }}
    </h1>
    <ul class="text-center pc:flex pc:justify-between">
      <li class="mobile:mb-[40px] flex-1">
        <div class="flex justify-center mb-[20px]">
          <div class="w-[60px] h-[60px]">
            <img src="@/assets/index/simi.png" alt="" />
          </div>
        </div>
        <h2 class="text-[#333] text-[20px] font-bold mb-[10px]">
          {{ i18nStore.translate('index125') }}
        </h2>
        <p class="text-[#666666] text-[14px] px-4 mobile:hidden">
          {{ i18nStore.translate('index126') }}
        </p>

        <p class="text-[#666666] text-[18px] pc:hidden">
          {{ i18nStore.translate('index126') }}
        </p>
      </li>
      <li class="mobile:mb-[40px] flex-1">
        <div class="flex justify-center mb-[20px]">
          <div class="w-[60px] h-[60px]">
            <img src="@/assets/index/anquan.png" alt="" />
          </div>
        </div>
        <h2 class="text-[#333] text-[20px] font-bold mb-[10px]">
          {{ i18nStore.translate('index127') }}
        </h2>
        <p class="text-[#666666] text-[14px] px-4 mobile:hidden">
          {{ i18nStore.translate('index128') }}
        </p>

        <p class="text-[#666666] text-[18px] pc:hidden">
          {{ i18nStore.translate('index129') }}
        </p>
      </li>
      <li class="flex-1">
        <div class="flex justify-center mb-[20px]">
          <div class="w-[60px] h-[60px]">
            <img src="@/assets/index/fuwu.png" alt="" />
          </div>
        </div>
        <h2 class="text-[#333] text-[20px] font-bold mb-[10px]">
          {{ i18nStore.translate('index130') }}
        </h2>
        <p class="text-[#666666] text-[14px] mobile:hidden px-4">
          {{ i18nStore.translate('index131') }}
        </p>
        <p class="text-[#666666] text-[18px] pc:hidden">
          {{ i18nStore.translate('index132') }}
        </p>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss"></style>
